<template>

  <div class="app-container" style="font-size:12px">
    <div class="filter-container">
      <el-date-picker
        v-model="listQuery.date1"
        style="width:150px;"
        format="yyyy-MM-dd"
        type="datetime"
        placeholder="订单开始日期"
      />
      <el-date-picker
        v-model="listQuery.date2"
        style="width:150px"
        format="yyyy-MM-dd"
        type="datetime"
        placeholder="订单结束日期"
      />
      <el-date-picker v-model="listQuery.month" style="width:130px" format="yyyy-MM" type="month" placeholder="开始月份" />
      <el-date-picker
        v-model="listQuery.monthend"
        style="width:130px"
        format="yyyy-MM"
        type="month"
        placeholder="结束月份"
      />
      <el-input
        v-model="listQuery.customer"
        placeholder="客户姓名"
        style="width: 130px;margin-top:6px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <!-- <el-input v-model="listQuery.rebackdate" placeholder="还款日" style="width: 130px;margin-top:6px" class="filter-item" @keyup.enter.native="handleFilter" /> -->
      <el-select
        v-model="listQuery.city"
        placeholder="选择城市"
        filterable
        class="filter-item"
        style="width:130px;margin-top:8px"
        @change="getRegionList"
      >
        <el-option label="请选择城市" value="" />
        <el-option v-for="item in city" :key="item.city" :label="item.name" :value="item.city" />
      </el-select>

      <el-select
        v-model="listQuery.merchant"
        placeholder="选择商户"
        filterable
        class="filter-item"
        style="width:130px;margin-top:6px"
      >
        <el-option label="请选择商户" value="" />
        <el-option
          v-for="item in merchant_list"
          :key="item.merchant_id"
          :label="item.merchant_name"
          :value="item.merchant_id"
        />
      </el-select>
      <el-select
        v-model="listQuery.sale_id"
        placeholder="选择销售"
        filterable
        class="filter-item"
        style="width:130px;margin-top:6px"
      >
        <el-option label="请选择销售" value="" />
        <el-option v-for="item in sale_list" :key="item.sale_id" :label="item.real_name" :value="item.sale_id" />
      </el-select>

      <el-select v-model="listQuery.b_model" placeholder="保理模式" class="filter-item" style="width:130px;margin-top:6px">
        <el-option label="保理模式" value="" />
        <el-option label="正常" value="1" />
        <el-option label="买断" value="2" />
        <el-option label="绿通" value="3" />
      </el-select>
      <el-select
        v-model="listQuery.order_status"
        placeholder="订单状态"
        class="filter-item"
        style="width:130px;margin-top:6px"
      >
        <el-option label="订单状态" value="" />
        <el-option label="还款中" value="1" />
        <el-option label="已完成" value="2" />
        <el-option label="已退单" value="3" />
      </el-select>

      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        style="margin-top:6px"
        @click="handleFilter"
      >查询</el-button>
      <el-button  v-waves class="filter-item" type="primary" icon="el-icon-search" @click="excelout"  style="margin-top:8px" >导出</el-button>
    </div>

    <!-- <el-row style="margin-top:20px;font-size:14px;color:#666">
      <el-col :span="3">订单数量：{{ allcount.all_count }}</el-col>
      <el-col :span="3">项目金额：{{ allcount.allmoney }}</el-col>
      <el-col :span="3">债权金额：{{ allcount.all_amount_money }}</el-col>
      <el-col :span="3">退单费：{{ allcount.all_return }}</el-col>
      <el-col :span="3">打款金额：{{ allcount.all_merchant_money }}</el-col>
      <el-col :span="3">服务费：{{ allcount.all_server_money }}</el-col>
      <el-col :span="3">已还金额：{{ allcount.all_payed_money }}</el-col>

    </el-row> -->

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      size="mini"
      :row-class-name="tableRowClassName"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="客户名称" align="center" fixed="left">
        <template slot-scope="{row}">
          <span>{{ row.real_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="城市" align="center" fixed="left">
        <template slot-scope="{row}">
          <span>{{ row.city }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商户名称" align="center" width="280">
        <template slot-scope="{row}">
          <span>{{ row.sort_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="进件时间" align="center" width="100px">
        <template slot-scope="{row}">
          {{ row.create_time }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="城市" align="center">
        <template slot-scope="{row}">
          <span>{{ row.city }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="项目金额" align="center">
        <template slot-scope="{row}">
          <span>{{ row.total_money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="债权利率" align="center">
        <template slot-scope="{row}">
          <span>{{ row.money_rate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="分期数" align="center" width="70px">
        <template slot-scope="{row}">
          <span>{{ row.total_period }}</span>
        </template>
      </el-table-column>
      <el-table-column label="月还款额" align="center">
        <template slot-scope="{row}">
          <span>{{ row.everymonth_money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="月还本金" align="center">
        <template slot-scope="{row}">
          <span>{{ row.yhbj }}</span>
        </template>
      </el-table-column>
      <el-table-column label="每期利息" align="center">
        <template slot-scope="{row}">
          <span>{{ row.everymonth_rate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="还款日" align="center">
        <template slot-scope="{row}">
          <span>{{ row.day }}</span>
        </template>
      </el-table-column>
      <el-table-column label="到期日" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{ row.last_month }}</span>
        </template>
      </el-table-column>
      <el-table-column label="保理模式" align="center">
        <template slot-scope="{row}">
          <span>{{ row.model_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="首打款" align="center" width="110px">
        <template slot-scope="{row}">
          <span>{{ row.firstSend }}</span>
        </template>
      </el-table-column>
      <el-table-column label="回款周期" align="center" width="110px">
        <template slot-scope="{row}">
          <span>{{ row.hkzq }}</span>
        </template>
      </el-table-column>
      <el-table-column label="首打收回" align="center" width="110px">
        <template slot-scope="{row}">
          <span>{{ row.sdsh||0 }}</span>
        </template>
      </el-table-column>

      <el-table-column label="总成本" align="center">
        <template slot-scope="{row}">
          <span>{{ row.cost||0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="每期成本" align="center">
        <template slot-scope="{row}">
          <span>{{ row.every_month_cost||0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="还款状态" align="center">
        <template slot-scope="{row}">
          <span>{{ row.status_name||0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已还期数" align="center">
        <template slot-scope="{row}">
          <span>{{ row.payed_num||0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="未还期数" align="center">
        <template slot-scope="{row}">
          <span>{{ row.no_payed_num||0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="滞纳金收入" align="center" width="90">
        <template slot-scope="{row}">
          <span>{{ row.late_fee||0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="利息收入" align="center">
        <template slot-scope="{row}">
          <span>{{ row.payed_rate||0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="办单费" align="center">
        <template slot-scope="{row}">
          <span>{{ row.server||0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="违约金" align="center">
        <template slot-scope="{row}">
          <span>{{ row.chargeback||0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="买断收益" align="center">
        <template slot-scope="{row}">
          <span>{{ row.md||0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="本月买断收益" align="center">
        <template slot-scope="{row}">
          <span>{{ row.this_month_md||0 }}</span>
        </template>
      </el-table-column>

      <el-table-column label="已摊销成本期数" align="center" width="110">
        <template slot-scope="{row}">
          <span>{{ row.tanxiao_num||0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已摊销成本" align="center" width="90">
        <template slot-scope="{row}">
          <span>{{ row.amortizationd||0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="未摊销成本" align="center" width="90">
        <template slot-scope="{row}">
          <span>{{ row.no_amortization||0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="当前总利润" align="center" width="90">
        <template slot-scope="{row}">
          <span>{{ row.now_all_profit||0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="坏账计提金额" align="center" width="100">
        <template slot-scope="{row}">
          <span>0</span>
        </template>
      </el-table-column>
      <el-table-column label="待回收利润" align="center" width="90">
        <template slot-scope="{row}">
          <span>{{ row.no_profit||0 }}</span>
        </template>
      </el-table-column>

      <el-table-column v-for="(item,index) in listQuery.montharr" :label="item" align="center">

        <el-table-column v-if="item==item" label="居间费" align="center">
          <template slot-scope="{row}">
            <span v-if="row.this_month_profit">{{ (row.this_month_profit[listQuery.montharr[index]].rate) ||0 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="滞纳金" align="center">
          <template slot-scope="{row}">
            <span
              v-if="row.this_month_profit"
            >{{ (row.this_month_profit[listQuery.montharr[index]].late_fee) ||0 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="利润" align="center">
          <template slot-scope="{row}">
            <span v-if="row.this_month_profit">{{ (row.this_month_profit[listQuery.montharr[index]].profit)||0 }}</span>
          </template>
        </el-table-column>

      </el-table-column>

      <el-table-column label="操作" fixed="right" align="center" width="100" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="cost(row)">
            总成本
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
    <el-dialog title="总成本录入" :visible.sync="serverAble" style="width:1000px;margin:auto">
      <el-form ref="dataForm" :model="form" label-width="120px">
        <el-form-item label="金额">
          <el-input v-model="form.costmoney" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="costSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import {
  financeOrderList,
  getRegion,
  excelout,
  costSubmit,
  exceloutprofit
} from '@/api/finance'
import excel from '@/components/excelout/index.vue'
import {
  formatDate
} from '@/utils/formatDate.js'
import {
  merchantListOnlyMerchant
} from '@/api/merchant'
import {
  fetchList
} from '@/api/sale'
import waves from '@/directive/waves' // waves directive
import {
  parseTime
} from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'ComplexTable',
  components: {
    Pagination,
    excel
  },
  directives: {
    waves
  },
  filters: {
    formatDate(time) {
      time = time * 1000
      const date = new Date(time)

      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  data() {
    return {
      form: {
        chargeback: '',
        refund_time: '',
        order_id: '',
        costmoney: ''
      },
      tableKey: 0,
      returnOrderAble: false,
      serverAble: false,

      tableRecord: 1,
      list: null,
      allcount: [],
      record_list: null,
      listRecordLoading: true,
      recordTotal: 0,
      total: 0,
      listLoading: true,
      city: [],
      quyu: [],
      listQuery: {
        page: 1,
        limit: 10,
        customer: '',
        rebackdate: '',
        city: '',
        quyu: '',
        merchant: '',
        sale_id: '',
        b_model: '',
        order_status: '',
        excel: 0,
        date1: '',
        date2: '',
        month: '',
        monthend: '',
        datestr: '',
        montharr: '',
        flag: 2
      },
      listRecordQuery: {
        page: 1,
        limit: 20,
        order_id: ''
      },
      listMerchantQuery: {
        page: 1,
        limit: 500
      },
      textMap: {
        record: '订单记录',
        create: 'Create'
      },
      merchant_list: [],
      sale_list: [],
      dialogRecordVisible: false,
      dialogStatus: '',
      downloadLoading: false
    }
  },
  created() {
    this.cacheQueryFormat()
    this.getList()
    // 添加钩子，页面刷新
    window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
    this.getRegionList()
    this.getMerchantList()
    // this.getSaleList()
  },
  mdestroyed() {
    // 添加钩子，页面刷新
    window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
  },
  methods: {
    beforeunloadFn(e) {
      // 刷新页面事件
      sessionStorage.removeItem('bookcustomer')
    },
    cacheQueryFormat() {
      const cacheQuery = sessionStorage.getItem('bookcustomer')
      if (cacheQuery) {
        this.listQuery = JSON.parse(cacheQuery)
      }
    },
    getList() {
      this.listLoading = true
      sessionStorage.setItem('bookcustomer', JSON.stringify(this.listQuery))
      financeOrderList(this.listQuery).then(response => {
        if (!this.listQuery.excel) {
          this.list = response.data.list.data
          this.listQuery.month = response.data.thismonth
          this.listQuery.montharr = response.data.montharr
          this.listQuery.monthend = response.data.thismonthend
          this.listQuery.datestr = response.data.thismonth + '至' + response.data.thismonthend
          this.total = response.data.list.total
          this.allcount = response.data.countall
          setTimeout(() => {
            this.listLoading = false
          }, 0.1 * 1000)
        } else {
          this.listQuery.excel = 0
        }
      })
    },

    costSubmit() {
      costSubmit(this.form).then(response => {
        this.$notify({
          title: '提示',
          message: '添加成功',
          type: 'success',
          duration: 2000,
          onClose: this.getList()
        })
        this.serverAble = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    cost(row) {
      this.form.order_id = row.order_id
      this.form.costmoney = row.cost
      this.serverAble = true
    },
    excelout() {
      this.listLoading = true
      this.listQuery.page = 1
      this.listQuery.limit = this.total
      exceloutprofit(this.listQuery).then(response => {
        this.listLoading = false
        const filepath = response.data.path
        window.location.href = filepath
      })
    },

    getRegionList() {
      getRegion(this.listQuery).then(response => {
        if (this.listQuery.city) {
          this.quyu = response.data
        } else {
          this.city = response.data
        }
      })
    },
    getSaleList() {
      fetchList().then(response => {
        this.sale_list = response.data.list
      })
    },
    getMerchantList() {
      merchantListOnlyMerchant(this.listMerchantQuery).then(response => {
        this.merchant_list = response.data.merchant.data
        this.sale_list = response.data.sale.data.data
      })
    },
    toPayment(order_id) {
      this.$router.push('/finance/customerpayment/' + order_id)
    },
    tableRowClassName({
      row,
      rowIndex
    }) {
      if (row.s == 1) {
        return 'success-row'
      } else if (row.s == 2) {
        return 'warning-row'
      } else if (row.s == 3) {
        return 'default-row'
      }
      return ''
    }

  }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
  }

  td {
    padding: 0;
  }

  select {
    width: 100px;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    float: left;
  }

  .el-table .warning-row {
    background: orangered;
  }

  .el-table .success-row {
    background: #98dd72;
  }

  .el-table .default-row {
    background: #ccc;
  }
</style>
